<div class="dormitory-list-container">
  <div class="filter-container">
    <mat-form-field>
      <mat-label>按楼栋筛选</mat-label>
      <input matInput [(ngModel)]="buildingFilter" placeholder="输入楼栋名称" (keyup.enter)="applyFilter()">
      <button *ngIf="buildingFilter" matSuffix mat-icon-button aria-label="清除" (click)="buildingFilter=''; applyFilter()">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
    <button mat-raised-button color="primary" (click)="openDialog()">
      <mat-icon>add</mat-icon>
      新增宿舍
    </button>
    <button mat-raised-button color="accent" (click)="openColumnConfig()">
      <mat-icon>settings</mat-icon>
      列配置
    </button>
  </div>

  <div class="table-container" [appLoading]="isLoading">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="room_number">
        <th mat-header-cell *matHeaderCellDef>房间号</th>
        <td mat-cell *matCellDef="let element">{{element.room_number}}</td>
      </ng-container>

      <ng-container matColumnDef="building">
        <th mat-header-cell *matHeaderCellDef>楼栋</th>
        <td mat-cell *matCellDef="let element">{{element.building}}</td>
      </ng-container>

      <ng-container matColumnDef="floor">
        <th mat-header-cell *matHeaderCellDef>楼层</th>
        <td mat-cell *matCellDef="let element">{{element.floor}}</td>
      </ng-container>

      <ng-container matColumnDef="capacity">
        <th mat-header-cell *matHeaderCellDef>容量</th>
        <td mat-cell *matCellDef="let element">{{element.capacity}}</td>
      </ng-container>

      <ng-container matColumnDef="occupied">
        <th mat-header-cell *matHeaderCellDef>已住人数</th>
        <td mat-cell *matCellDef="let element">{{element.occupied}}</td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>状态</th>
        <td mat-cell *matCellDef="let element">{{element.status}}</td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>描述</th>
        <td mat-cell *matCellDef="let element">{{element.description}}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button color="primary" (click)="openDialog(element)">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="deleteDormitory(element.id)">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator
      [length]="total"
      [pageSize]="pageSize"
      [pageSizeOptions]="[5, 10, 25, 100]"
      (page)="onPageChange($event)"
      aria-label="选择页码">
    </mat-paginator>
  </div>
</div>